﻿<link rel="stylesheet" type="text/css" href="styles/slide-image.css" />

<div class="all-elements">
    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="nav-item selected-nav-item" data-ng-repeat="r in roleByGroup">
                <a href="#/{{r.RoleValue}}">
                    <div class="icon-nav {{r.RoleValue}}"></div>
                    {{r.RoleName}}
                </a>
            </div>
            <div class="nav-item">
                <a href="#">
                    <div class="icon-nav icon-share" ng-click="out()"></div>
                    THOÁT
                </a>
            </div>
        </div>
    </div>

    <div id="content" class="page-content">
        <div class="page-header">
            <p class="logo">
            </p>
            <a href="#" class="deploy-sidebar"></a>
            <div class="user">
                <span class="name">{{userName}}</span>
                <div class="notifi">
                    <span class="noti-chart" ng-show="countNewMessage>0"><a href="#/newMessage">{{countNewMessage}}</a></span>
                    <span class="noti-friend" ng-show="countAddFriend>0"><a href="#/newFriend">{{countAddFriend}}</a></span>
                    <span class="noti-fromroom" ng-show="countFromRoom>0"><a href="#/newFromRoom">{{countFromRoom}}</a></span>
                </div>
            </div>
        </div>
        <div class="page-content-wrapper">
            <div class="container no-bottom">
                <div class="heading">
                    <!--<div class="heading-left">
                        <span class="icon number">1</span>
                    </div>-->
                    <div class="heading-left">
                        <h3>phương tiện giao thông</h3>
                    </div>
                </div>
            </div>

            <div class="decoration"></div>
            <div ng-click="showSettingClick()"><span class="icon-setting icon-inline blue-icon float-right"></span></div>
            <div ng-show="showSetting">
                <form name="myForm" ng-show="matterUser" class="form">
                    <p>Id phòng:{{roomItem.Id}}</p>
                    <p>Biệt danh:<input type="text" ng-model="roomItem.Name" required /></p>
                    <p>Tên đầy đủ:<input type="text" ng-model="roomItem.FullName" required /></p>
                    Mô tả phòng:<textarea ng-model="roomItem.Description" />
                    <button type="submit" ng-disabled="!myForm.$valid" ng-click="updateRoom()" class="float-left submit-btn">Cập nhật</button>
                    <span class="icon-loading icon-inline float-left" ng-show="loadding"></span>
                    <span class="icon-submit-ok icon-inline float-left" ng-show="submitComplie"></span>
                </form>
                <div ng-show="!matterUser">
                    <p>Id phòng:{{roomItem.Id}}</p>
                    <p>Biệt danh:<i>{{roomItem.Name}}</i></p>
                    <p>Tên đầy đủ:<i>{{roomItem.FullName}}</i></p>
                    Mô tả phòng:<i>{{roomItem.Description}}</i>
                </div>
                <h3>Thành viên trong phòng</h3>
                <ul class="list-friend-big">
                    <li id="friend_{{f.Id}}" data-ng-repeat="f in userInRoom">
                        <a href="#/profile/{{f.UserId}}">
                            <img class="image-decoration friend-online" ng-src="{{severFile}}Avatar/{{f.Avatar}}" />
                        </a>
                        <span class="icon-remove-sign-4 icon-inline gray-icon right" ng-click="deleteUserInRoom(f)" ng-show="matterUser"></span>
                        <span>{{f.UserName}}</span>
                    </li>
                </ul>
                <div class="float-right" ng-show="matterUser" ng-click="delRoom()">Xóa phòng</div>
                <div class="decoration"></div>
            </div>

            <div class="container">

                <div class="blog-post">

                    <p class="post-content">
                        <div class="slider-lesson-image ">
                            <img data-ng-repeat="i in getPictureByLesson" class="slide slide-animation nonDraggableImage"
                                 ng-hide="!isCurrentSlideIndex($index)" ng-src="{{severFile}}lesson/{{i.PictureUrl}}">
                            <a class="arrow prev" href="javascript:void(0)" ng-click="nextSlide()"></a>
                            <a class="arrow next" href="javascript:void(0)" ng-click="prevSlide()"></a>
                        </div>
                        <h3>từ vựng</h3>
                    <p>
                        <div id="audio"></div>
                        <ul>
                            <li data-ng-repeat="w in getWordByLesson" class="word-box word">
                                <div id="audio_{{w.Id}}" class="audio-box">
                                    <span class="icon-audio icon-com-audio" ng-click="speaking(w.WordName)"></span>
                                    <span class="icon-audio icon-user-audio" onclick="playRecord();"><span id="user_position"></span></span>
                                    <span class="icon-audio icon-capture-audio" onclick="recordSound();"><span id="audio_position"></span></span>
                                </div>
                                <span>{{w.WordName}}</span> : <span>{{w.Meaning}}</span> <span></span>
                                <div><a><span class="audio" ng-click="audioBox(w.Id)"><em>phát âm: {{w.Pronounce}}</em></span></a></div>
                            </li>
                        </ul>
                    </p>
                </div>
                <h3>thảo luận</h3>
                <div iscrollable="scrollbars: true, mouseWheel: true, interactiveScrollbars: true" id="wrapper">
                    <div id="scroller">
                        <div id="thelist">
                            <div class="viewport">
                                <div id="thelist" class="overview">
                                    <div class="chat-line" data-ng-repeat="m in MessageByRoom">
                                        <img class="image-decoration user-chat-line" ng-src="{{severName}}Avatar/{{m.Avatar}}" />
                                        <div ng-if="!m.Atack">
                                            {{m.CommentText}}
                                        </div>
                                        <div id="mess_{{m.Id}}" ng-if="m.Atack" class="image-atack">
                                            <img ng-src="{{severName}}Upload/{{m.Atack}}" />
                                            <span class="icon-remove-sign-4 icon-inline gray-icon right" ng-click="delComment(m.Id)"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-area" ng-show="chatArea">
                    <textarea id="commentTextArea" ng-model="messageData.CommentText" placeholder="write text here..."></textarea>
                    <a class="atack" ng-click="selectPicture()"><span class="icon-paperclip mini-icon"></span><span class="mini-size">Chia sẻ nhanh</span></a>
                    <a class="camera" ng-click="takePicture()"><span class="icon-camera-retro mini-icon"></span><span class="mini-size">Đính kèm</span></a>
                    <input type='submit' value='Gửi' ng-click="createComment()" />
                </div>
                <div class="decoration"></div>
                <div class="post-details">
                    <!--<a class="posted-by">{{lessonDetail.CreateBy}}</a>
                    <a class="posted-at">{{lessonDetail.DateTime}}</a>-->
                    <a class="posted-tag" data-ng-repeat="t in getTagByLesson"><span>{{t.TagName}}, </span></a>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-shortcuts">
            <div>
                <a href="#/room">
                    <span class="button-bottom icon-back-room"></span><span class="button-text">Quay về</span>
                </a>
            </div>
            <div ng-show="matterUser">
                <a href="javascript:void(0)" ng-click="nextLessonClick()">
                    <span class="button-bottom icon-next-lesson"></span><span class="button-text">Bài tiếp theo</span>
                </a>
            </div>
            <div ng-show="joinRoom">
                <a href="javascript:void(0)" ng-click="joinRoomClick()">
                    <span class="button-bottom icon-next-lesson"></span><span class="button-text">Tham gia</span>
                </a>
            </div>
            <div ng-show="outRoom">
                <a href="javascript:void(0)" ng-click="outRoomClick()">
                    <span class="button-bottom icon-next-lesson"></span><span class="button-text">Rời phòng</span>
                </a>
            </div>
        </div>
    </div>
</div>
</div>